<template>
     <div>
        <div class="page-title">
            <el-breadcrumb  separator="/">
                <el-breadcrumb-item><i class="el-icon-location-outline"></i>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>系统账号</el-breadcrumb-item>
            </el-breadcrumb>
            <div><i class="el-icon-help"></i></div>
        </div>
        <div class="sub-block">
            <div class="main-opt-btn-group">
                <el-button  type="info" size="mini" plain @click="createNewUser">新建系统用户</el-button>
            </div>
            <div class="query-form-container">
                <el-form ref="queryForm"  class="query-form" size="mini" label-suffix="：" :model="query" :inline="true" >
                    <el-form-item  prop="account">
                        <el-input placeholder="账号" v-model="query.account"></el-input>   
                    </el-form-item>
                    <el-form-item  prop="name">
                        <el-input placeholder="姓名" v-model="query.name"></el-input>   
                    </el-form-item>
                    <el-form-item prop="role">
                        <el-input placeholder="所属角色" v-model="query.role"></el-input>   
                    </el-form-item>
                    <el-form-item prop="date1">
                        <el-date-picker type="date" placeholder="注册开始日期" v-model="query.date1"></el-date-picker>
                    </el-form-item>
                    <el-form-item prop="date2">
                        <el-date-picker type="date" placeholder="注册结束日期" v-model="query.date2"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" icon="el-icon-search" @click="searchUserList"></el-button>
                        <el-button size="mini" icon="el-icon-refresh-left" @click="resetForm"></el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="table-container">
                <el-table
                    :data="userList"
                    size="mini"
                    header-row-class-name="table-header"
                    empty-text="暂无数据"
                    :default-sort = "{prop: 'createTime', order: 'descending'}">
                        <el-table-column
                            type="index"
                            label="序号"
                            width="50"/>
                        <el-table-column
                            prop="account"
                            label="账号"
                            width="200" />
                        <el-table-column
                            prop="role"
                            label="角色"
                            width="200" />
                        <el-table-column
                            prop="username"
                            label="姓名"
                            width="200" />
                        <el-table-column
                            prop="createTime"
                            label="注册时间"
                            sortable/> 
                        <el-table-column
                            prop="enable"
                            label="状态"
                            width="100"/>                        
                        <el-table-column
                            fixed="right"
                            label="操作"
                            width="120">
                            <template #default="scope">
                                <el-button type="text" size="small" @click="viewUser(scope.row.id)">查看</el-button>
                                <el-button type="text" size="small" @click="modifyUser(scope.row.id)">修改</el-button>
                                <span class="grid-delete">
                                    <el-popconfirm
                                        title="确定删除吗？"
                                        @confirm="deleteUser(scope.row.id)">
                                        <template #reference>
                                            <el-button  type="text" size="small">删除</el-button>
                                        </template>
                                    </el-popconfirm>
                                </span>
                            </template>
                        </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog
            :title="dialogTitle"
            v-model="dialogVisible"
            width="60%">
            <el-descriptions border :column="2" title="账号信息" v-if="dialogTitle == '查看详情'">
                <el-descriptions-item label="账号" label-class-name="detial-label" class-name="detial-content">{{current.account}}</el-descriptions-item>
                <el-descriptions-item label="姓名" label-class-name="detial-label" class-name="detial-content">{{current.username}}</el-descriptions-item>
                <el-descriptions-item label="角色" label-class-name="detial-label" class-name="detial-content">{{current.role}}</el-descriptions-item>
                <el-descriptions-item label="状态" label-class-name="detial-label" class-name="detial-content">{{current.enable}}</el-descriptions-item>
                <el-descriptions-item label="手机号" label-class-name="detial-label" class-name="detial-content">{{current.phone}}</el-descriptions-item>
                <el-descriptions-item label="邮箱" label-class-name="detial-label" class-name="detial-content">{{current.email}}</el-descriptions-item>
                <el-descriptions-item label="注册时间" label-class-name="detial-label" class-name="detial-content">{{current.createTime}}</el-descriptions-item>
                <el-descriptions-item label="头像" label-class-name="detial-label" class-name="detial-content">
                    <el-image
                    style="width: 100px; height: 100px"
                    :src="current.image"
                    fit="fill"></el-image>
                </el-descriptions-item>
            </el-descriptions>
            <div class="dialog-form" v-if="dialogTitle == '修改账号' || dialogTitle == '新建用户'" >
                <el-form ref="userInfoForm" :model="current" label-width="120px" label-suffix='：'>
                    <el-form-item label="账号">
                        <el-input v-model="current.account"  placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="current.username"  placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="角色">
                        <el-select v-model="current.role" placeholder="请选择">
                            <el-option
                                v-for="item in roleOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="头像">
                        <el-upload
                            class="avatar-uploader"
                            :action="uploadUrl"
                            :on-success="handleAvatarSuccess"
                            :show-file-list="false">
                            <template v-if="current.image" >
                                <img :src="current.image" class="avatar">
                                <el-button size="mini" type="primary" plain>更换头像</el-button>
                            </template>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            <template #tip>
                                <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
                            </template>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model.number="current.phone"  placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱地址">
                        <el-input v-model="current.email"  placeholder="请输入邮箱地址"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="current.enable" placeholder="请选择">
                            <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitDialog">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import axios from 'axios'
import { defineComponent, getCurrentInstance, onMounted, reactive, ref } from 'vue'
import {Service} from '../../../../axios'

export default defineComponent({
    setup () {
        const uploadUrl = axios.defaults.baseURL + 'uploadFile'
        let query = reactive({
            name:'',
            role:'',
            account: '',
            data1:'',
            data2:''
        })
        let userList:any = ref([])
        function queryUserList(){
            Service.get('/user/showAllUser').then(response =>{
                userList.value = response.data.data
            })
        }
        let dialogTitle = ref('')
        let dialogVisible = ref(false)
        function createNewUser(){
            dialogVisible.value = true
            dialogTitle.value = '新建用户'
            Object.assign(current,{})
        }
        function viewUser(id:string){
            dialogVisible.value = true
            dialogTitle.value = '查看详情'
            queryCurrent(id)
        }
        function modifyUser(id:string){
            dialogVisible.value = true
            dialogTitle.value = '修改账号'
            queryCurrent(id)
        }
        function deleteUser(id:string){
            Service.delete('/user/deleteUser/' + id).then(()=>{
                queryUserList()
            })
        }
        function submitDialog(){
            if(dialogTitle.value == '新建用户'){
                dialogVisible.value = false
                submitCreateNewUser()
            }else if(dialogTitle.value == '修改账号'){
                dialogVisible.value = false
                submitModifyUser()
            }else{
                dialogVisible.value = false
            }
        }
        function submitCreateNewUser(){
            console.log('提交新建')
        }
        let current:any = reactive({})
        function submitModifyUser(){
            console.log(JSON.stringify(current))
            Service.post('/user/editUser',{
                id: current.id,
                account: current.account,
                username: current.username ,
                password: current.password ,
                role: current.role ,
                image: current.image ,
                phone: current.phone ,
                email: current.email ,
                enable: current.enable
            }).then( ()=>{
                console.log(current)
                queryUserList()
            })
        }
        function searchUserList(){
            console.log('查询')
        }
        const currentInstance = getCurrentInstance();
        function resetForm() {
            let queryForm : any = currentInstance?.proxy?.$refs['queryForm'];
            queryForm.resetFields();
        }
        function handleAvatarSuccess(response: any){
            current.image = response.fileDownloadUri
        }
        function queryCurrent(id:string){
            Service.get('/user/userInfo/'+id).then(response =>{
                Object.assign(current,response.data.data)
            })  
        }
        let roleOptions:any = ref([])
        function queryRoleOption(){
           roleOptions.value = [{
                value: '系统管理员',
                label: '系统管理员'
            }, {
                value: '超级系统管理员',
                label: '超级系统管理员'
            }]
        }
        let statusOptions:any = ref([])
        function queryStatusOption(){
            statusOptions.value = [{
                value: '正常',
                label: '正常'
            },{
                value: '冻结',
                label: '冻结'
            }]
        }
        onMounted(() => { 
            queryRoleOption(),
            queryStatusOption(),
            queryUserList()
        })
        return {
            query,
            userList,
            dialogVisible,
            dialogTitle,
            viewUser,
            modifyUser,
            deleteUser,
            queryCurrent,
            queryUserList,
            uploadUrl,
            current,
            handleAvatarSuccess,
            roleOptions,
            statusOptions,
            createNewUser,
            submitDialog,
            submitCreateNewUser,
            submitModifyUser,
            searchUserList,
            resetForm
        }
    }
})
</script>

<style scoped lang="scss">

.dialog-form{
    width: 500px;
}

</style>